Build a star-collecting game using the hand tracking model. The project introduces loading images, tracking multiple hands, and collision detection to collect stars.
Check that the webcam works before the class. ml5.js loads the model over the internet, so the connection needs to be working.
Start from the base code linked in each exercise rather than typing the hand tracking setup again.
Recap from the previous lesson: the model returns numbered keypoints for each hand, and point 8 is the index fingertip. In this lesson that point is used to move something rather than just to mark a spot.
Explain that nothing is actually being picked up or dragged. On every pass through draw() the bird is simply drawn again at wherever the fingertip is now.
Explain that images have to be loaded in preload() before they can be drawn, otherwise nothing appears on the screen.
Explain collision as a distance check - the program measures the gap between the centre of the hand and the centre of the star, and counts it as caught when that gap is small enough.
Points to Ponder:
Someone decided a hand should be described by 21 points by the model. Why 21? What would change if they had picked 5, or 100?
The model has been trained using photographs of hands. Does that mean that the model will recognize hands of any person? In what conditions do you think the model will fail to recognize a hand?